import React, {Component} from 'react'
import {BrowserRouter, Route, Switch , Link} from 'react-router-dom'

// 静态资源
import './index.css'
import topImg from '../../assets/imgs/icon-menu-top.png'
import bottomImg from '../../assets/imgs/icon-menu-bottom.png'
import {llStyle , refresh} from '../../config/style.js'


// 路由模块
import SocialRmenu from './children/social/index.jsx'
import UserRmenu from './children/user/index.jsx'
import AdRmenu from './children/ad/index.jsx'
import SystemRmenu from './children/system/index.jsx'
import TalkRmenu from './children/talk/index.jsx'
import ViolateRmenu from './children/violate/index.jsx'
import BackstageRmenu from './children/backstage/index.jsx'
import BackstageARmenu from './children/backstage-account/index.jsx'

class LeftNav extends Component {
  render() {
    return (
      <div class="controller">
        <div class="left-nav">
          {/* 菜单项 */}
          <div class="leftNav-title">后台操作</div>
          <div class="menu">
            <div class="menu-icon">
                <img  class="top-icon" src={topImg} alt=""/>
                <img class="bottom-icon" src={bottomImg} alt=""/>
            </div>

            <div class="menu">
              <BrowserRouter>
                <Link to="/social" style={llStyle}>
                  <div class="menu-item" onClick={refresh}>社区</div>
                </Link>
                <Link to="/user" style={llStyle}>
                  <div class="menu-item" onClick={refresh}>用户</div>
                </Link>
                <Link to="/talk" style={llStyle}>
                  <div class="menu-item" onClick={refresh}>聊天室</div>
                  </Link>
                <Link to="/system" style={llStyle}>
                  <div class="menu-item" onClick={refresh}>系统通知</div>
                </Link>
                <Link to="/ad" style={llStyle}>
                  <div class="menu-item" onClick={refresh}>广告</div>
                </Link>
                <Link to="/backstage" style={llStyle}>
                  <div class="menu-item" onClick={refresh}>客服</div>
                </Link>
                <Link to="/backstage-account" style={llStyle}>
                  <div class="menu-item" onClick={refresh}>后台账号</div>
                </Link>
                <Link to="/violate" style={llStyle}>
                  <div class="menu-item" onClick={refresh}>违禁词库</div> 
                </Link>
              </BrowserRouter>
            </div>
          </div>
        </div>
      
        {/* 子菜单项 */}
        <BrowserRouter>
          <Switch>
            <Route path='/system' component={SystemRmenu}></Route>
            <Route path='/backstage-account' component={BackstageARmenu}></Route>
            <Route path='/talk' component={TalkRmenu}></Route>
            <Route path='/violate' component={ViolateRmenu}></Route>
            <Route path='/backstage' component={BackstageRmenu}></Route>
            <Route path='/ad' component={AdRmenu}></Route>
            <Route path='/user' component={UserRmenu}></Route>
            <Route path='/Social' component={SocialRmenu}></Route>
            <Route path='/' component={SocialRmenu}></Route>
          </Switch>
        </BrowserRouter>
      </div>
    )
  }
}

export default LeftNav